<style lang="less" scoped>
.message-input-box {
  width: 100%;
  margin-bottom: 0px;

  .message-input-body {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .message-input {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    min-height: 60px;
    max-width: 738px;
    min-width: 350px;
    border-radius: 16px;
    border: 1px solid #ddd;
    background: #fff;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.08);
    transition: all 0.2s;
    padding: 10px 0;
    margin: 0 12px;

    .text-input {
      max-height: 10em;
      line-height: 1.2em;
      height: 1.5em;
      overflow: hidden;
      white-space: pre-wrap; /* 保持内容的换行，并允许自动换行 */
      resize: none;
      border: none;
      width: 100%;
      margin: 0 45px 0 12px;
      color: rgb(26, 26, 26);
      font-size: 16px;
      font-weight: 400;
      background: none;

      transition: height 0.1s ease-in-out;;

      &::placeholder {
        font-size: 16px;
        font-weight: 400;
        color: rgb(191, 191, 191);
      }
    }

    /* 滚动条样式 */
    .text-input::-webkit-scrollbar {
        width: 4px; /*  设置纵轴（y轴）轴滚动条 */
        height: 4px; /*  设置横轴（x轴）轴滚动条 */
    }
    /* 滚动条滑块（里面小方块） */
    .text-input::-webkit-scrollbar-thumb {
        cursor: pointer;
        border-radius: 5px;
        background: transparent;
    }
    /* 滚动条轨道 */
    .text-input::-webkit-scrollbar-track {
        border-radius: 5px;
        background: transparent;
    }

    /* hover时显色 */
    .text-input:hover::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.2);
    }
    .text-input:hover::-webkit-scrollbar-track {
        background: rgba(0,0,0,0.1);
    }

    .send-btn {
      position: absolute;
      bottom: 13px;
      right: 10px;
      font-size: 32px;
      color: #b3b3b3;
      transition: all 0.2s;
    }

    .send-btn-active {
      color: #2475fc;
      cursor: pointer;
    }

    &.is-set {
      border: 1px solid #2475fc;
    }
  }
}
</style>

<template>
  <div class="message-input-box">
    <div class="message-input-body">
      <div class="message-input" :class="{ 'is-set': valueText }">
        <textarea
          ref="messageTextarea"
          :style="{height: inputHeight}"
          class="text-input"
          v-model="valueText"
          placeholder="在此输入您想了解的内容"
          @change="onChange"
          @input="onInput"
          @keyup.enter="handleEnter" 
          @focus="onFocus"
          @blur="onBlur"
        ></textarea>
        <svg-icon :name="isSendBtn ? 'paper-airplane-new-active' : 'paper-airplane-new'" :class="{'send-btn-active': isSendBtn}" class="send-btn" @click="sendMessage" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import calcTextareaHeight from '@/utils/calcTextareaHeight'

const emit = defineEmits(['update:value', 'send' ])

const isSendBtn = ref(false)
const valueText = ref("")
const inputHeight = ref("1.5em")
const messageTextarea = ref(null)

const onChange = (event: Event) => {
  const target = event.target as HTMLInputElement;
  emit('update:value', target.value)
}

const onInput = (event) => {
  // 会有延迟
  if (valueText.value.trim()) {
    isSendBtn.value = true
  } else {
    isSendBtn.value = false
  }
  inputHeight.value = calcTextareaHeight(messageTextarea.value).height // 调整高度
  if (parseInt(inputHeight.value) >= 160) {
    event.target.style.overflow = 'auto'
  } else {
    event.target.style.overflow = 'hidden'
  }
}

const sendMessage = () => {
  if (valueText.value.trim()) {
    isSendBtn.value = false
    emit('send', valueText.value)
    valueText.value = ""
    inputHeight.value = '1.5em'
  }
}

const handleEnter = (e: KeyboardEvent) => {
  e.preventDefault()
  const target = e.target as HTMLInputElement;
  if(e.shiftKey){
    inputHeight.value = target.scrollHeight + 'px';
    return 
  }
  if (!valueText.value.trim()) {
    return
  }
  sendMessage()
}

const onFocus = (event) => {
  event.target.parentNode.style.borderColor = "#2475FC"
}

const onBlur = (event) => {
  event.target.parentNode.style.borderColor = "#DDD"
}
const handleSetValue = (data: string) => {
  valueText.value = data;
}
defineExpose({
  handleSetValue
})
</script>
